<template>
  <div id="writeManage">
    <div ref="manageUp" @click="showUp">></div>
    <ul class="container" ref="manageContainer" v-show="!isShowWord">
      <li v-show="index === 1">
        <docManage></docManage>
      </li>
      <li v-show="index === 2">
        <outlineManage></outlineManage>
      </li>
      <li v-show="index === 3">3</li>
      <li v-show="index === 4">4</li>
    </ul>
    <ul class="right-tabs" v-show="!isShowWord">
      <li v-for="(item, i) in list" :key="i" @click="tabHandler(i + 1)">
        <img src="" alt="" />
        <p>{{ item }}</p>
      </li>
    </ul>
    <div v-show="isShowWord">
      <span @click="goBack"><</span>
      <div v-html="html"></div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
import docManage from "@/components/write/writeManage/docManage.vue";
import outlineManage from "@/components/write/writeManage/outlineManage.vue";
export default {
  name: "WriteManage",
  components: { docManage, outlineManage },
  data() {
    return {
      list: ["文献管理", "提纲思路", "智能编写", "智能纠错"],
      index: 1,
      rWidth: null,
    };
  },
  computed: {
    ...mapState("doc", ["isShowWord", "html"]),
  },
  directives: {
    showUp(el, binding, vnode) {
      console.log(this, el, binding);
    },
  },
  mounted() {
    this.rWidth = this.$refs.manageContainer.clientWidth + "px";
    console.log(this.rWidth);
  },
  methods: {
    ...mapActions("doc", ["set_showWord"]),
    tabHandler(i) {
      console.log(this.index, this.$refs);
      if (this.index === i) {
        this.showUp();
      } else {
        this.index = i;
      }
    },
    goBack() {
      this.set_showWord([false]);
    },
    showUp() {
      console.log(this.$refs);
      this.$refs.manageContainer.style.transition = "all .3s";
      if (this.$refs.manageContainer.clientWidth < 50) {
        this.$refs.manageContainer.style.width = this.rWidth;
      } else {
        this.$refs.manageContainer.style.width = 0;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
#writeManage {
  // width: 600px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  > .container {
    width: 500px;
    height: 100%;
    border: 1px solid #ccc;
    overflow: auto;
  }
  > .right-tabs {
    width: 70px;
    height: 100%;
    > li {
      cursor: pointer;
      margin: 0 auto 10px;
      > img {
        margin: 0 auto;
        display: block;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: 1px solid #ccc;
      }
    }
  }
}
</style>